<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
	<title>jQuery UI Multiselect</title> 
	<link rel="stylesheet" href="css/common.css" type="text/css" />
	<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/ui.all.css" />
	<link type="text/css" href="css/ui.multiselect.css" rel="stylesheet" />
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
	<script type="text/javascript" src="js/plugins/localisation/jquery.localisation-min.js"></script>
	<script type="text/javascript" src="js/plugins/scrollTo/jquery.scrollTo-min.js"></script>
	<script type="text/javascript" src="js/ui.multiselect.js"></script>
	
	<script type="text/javascript"><!--
		$(function(){
			$.localise('ui-multiselect', {language: 'cn', path: 'js/locale/'});
			$(".multiselect").multiselect();
			$('#switcher').themeswitcher();
			
		});
		function show(){
	        var sel = document.getElementById("countries");
	        var s = "";
	        for(var i=0;i< sel.options.length;i++){
	           if(sel.options[i].selected) s += sel.options[i].value + ",";
	        }
	        if(s!="") s = s.substr(0,s.length-1);
	        alert(s);
		}
		
	--></script>
</head>
<body>


    <form action="index.html">
      <select id="countries" class="multiselect" multiple="multiple" name="countries[]">
        <option value="1">王一</option>
        <option value="2">王二</option>
        <option value="3">王三</option>
        <option value="4">王四</option>
        <option value="5">要四</option>
        
      </select>
      <br/>
      <input type="button" value="Submit Form" onclick="show()"/>
    </form>    

    <div id="switcher"></div>
    
   

</body> 
</html>
